<template>
  <div class="my-data">
    <!-- 全部站点数据总览 -->
    <NavPrev class="my-data-content-con" :navPrev="navPrev"></NavPrev>

    <!-- 全部站点数据 -->
    <div class="my-data-list">
      <div class="my-data-list-box">
        <div class="list-box-head">
          <p>
            <span>全部作品数据</span>
            <el-input
              size="small"
              placeholder="请输入内容↵"
              v-model="searchKey"
              @change="search4ProduByKey"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
            </el-input>
          </p>
        </div>
        <div class="list-box-nav">
          <a href="javascript:;">作品名称 <i class="jy-icon-sort"></i> </a>
          <a href="javascript:;">数据 </a>
          <a href="javascript:;">创建时间 <i class="jy-icon-sort"></i> </a>
          <a href="javascript:;">抽奖结果 </a>
        </div>
        <ul class="list-box">
          <li
            :key="index"
            v-for="(item, index) in lists"
            :class="{
              'is-detail-active': curSiteId == item.site_id,
            }"
          >
            <a href="javascript:;" @click.stop="click2ShowDetail(item)">
              <span class="site"> ({{ item.site_id }}) </span>
              {{ item.name }}
            </a>
            <!-- 2个小时后更新 -->
            <a href="javascript:;" @click.stop="click2ShowDetail(item)">
              <span class="new-msg">
                {{ item.aggre_formdata_allnum }}
                <i
                  v-if="
                    item.aggre_formdata_newnum &&
                    !isNaN(parseInt(item.aggre_formdata_newnum)) &&
                    parseInt(item.aggre_formdata_newnum) > 0
                  "
                >
                  {{ item.aggre_formdata_newnum }}
                </i>
              </span>
            </a>
            <a href="javascript:;" @click.stop="click2ShowDetail(item)">
              {{ item.add_time }}
            </a>
            <a
              href="javascript:;"
              style="padding-right: 20px"
              @click="onGetExportData(item)"
            >
              <el-icon><download /></el-icon>
            </a>
          </li>
        </ul>
        <iframe
          src=""
          ref="lotteryIframe"
          style="position: absolute; visibility: hidden; height: 0"
        ></iframe>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :page-count="totalPage"
        :current-page="curPage"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import NavPrev from "@/views/child/admin/admin-data/nav-prev.vue";
import { reactive } from "vue";
import { useWebUserStore } from "@/store/web/user";
const useWebUser = useWebUserStore();
export default {
  setup() {
    const state = reactive({
      searchKey: "",
      curSiteId: "",
    });
    const state_ = {
      curPage: 1,
      pageSize: 20,
      tips:
        "<p>· 浏览量（pv）指作品被打开浏览的次数<br />\
          · 访客数（uv）指有多少人浏览了该作品<br />\
          · 分享数指作品在微信中被分享到朋友圈和转发到会话的次数<br />\
          · 平均停留时间指作品每次浏览的时间总和／总的浏览次数<br />\
          · 由于访问统计受访客的网络原因影响，统计数据可能会出现微小偏差</p>",

      searchTimer: null,
    };
    _.merge(state, state_);
    return state;
  },
  computed: {
    lists() {
      return useWebUser.myLists;
    },
    listsData() {
      return useWebUser.myListsData;
    },
    navPrev() {
      return useWebUser.myNavPrev;
    },
    totalPage() {
      return useWebUser.myListsData?.totalPage || 0;
    },
  },
  components: {
    NavPrev,
  },
  beforeMount() {
    this.curPage = parseInt(this.$route.query.page) || 1;
    useWebUser.getNavPrev();
    useWebUser.getMyLists({
      page: this.curPage,
      pageSize: 20,
    });
  },
  mounted() {},
  methods: {
    handleCurrentChange(val) {
      this.curPage = val;
      useWebUser.getMyLists({
        page: this.curPage,
        pageSize: 20,
        keywords: this.searchKey,
      });
    },
    search4ProduByKey() {
      let that = this;
      if (this.searchTimer) clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(function () {
        that.curPage = 1;
        useWebUser.getMyLists({
          page: that.curPage,
          pageSize: 20,
          keywords: that.searchKey,
        });
      }, 200);
    },
    click2ShowDetail(item) {
      this.curSiteId = item.site_id;
      this.$router.push({
        path: `/admin/data/${this.curSiteId}`,
        query: { site_id: this.curSiteId, page: this.curPage },
      });
    },
    onGetExportData(item) {
      this.$refs.lotteryIframe.src =
        this.env.apiUrl + "/stat/expdata?site_id=" + item.site_id + "&table=com_lottery";
    },
  },
};
</script>
